<template>
  <div class="team-manage flex-column">
    <!-- <div class="page-head action-bar flex-row-between flex-row-center">
      <div>团队名称 : {{ $g.session.data || "无" }}</div>
      <el-button type="primary" @click="setDesign({})">成员添加</el-button>
    </div> -->
    <div class="page-body flex-row-between">
      <!-- <div>
        <div class="title">功能列表</div>
        <div class="view">
          <div><el-input></el-input></div>
          <el-tree :data="data" :props="props" default-expand-all show-checkbox :expand-on-click-node="false" :height="208"></el-tree>
        </div>
      </div> -->
      <div class="function-custom flex-column">
        <div class="title flex-row-between flex-row-center">
          公司-组织架构图
          <el-space>
            <el-button type="primary" @click="setDesign({})">部门添加</el-button>
            <el-button type="primary" color="#3159FC" @click="setDesign({})">监理机构添加</el-button>
          </el-space>
        </div>
        <Graph
          class="graph-view"
          :data="graphData"
          :config="{
            nodeHeight: 80,
            nodeWidth: 180,
            marginX: 60
          }"
        >
          <template #node="{ node, data }">
            <div
              class="node-card flex-column click"
              :id="'node' + node.id"
              :class="{
                team: data.type == 2,
                'node-active': data == active
              }"
              @click="setActive(data)"
            >
              <div class="node-card-header flex-row-between flex-row-center click">
                <el-space>
                  <Icon icon="Bumen"></Icon>
                  {{ data.name }}
                </el-space>
                <Icon icon="close" class="click"></Icon>
              </div>
              <div class="node-card-body">{{ data.name }}</div>
              <div class="node-card-expand click" v-if="node.children && node.children.length">
                <Icon v-if="node.children.length" icon="Minus"></Icon>
              </div>
            </div>
          </template>
        </Graph>
      </div>
      <div v-if="active" class="struct-item-preview" :class="expand ? '' : 'view-hide'">
        <div class="view-trigger flex-column-center click" @click="expand = !expand">
          {{ expand ? "收起" : "展开" }}
          <Icon icon="Zhankai-Ssuo" class="click"></Icon>
        </div>
        <div class="abs view-detail">
          <div class="title flex-row-between flex-row-center">部门信息</div>
          <div class="view">
            <div class="title flex-row-between flex-row-center">
              <el-space>
                <span>部门名称</span>
                <el-input v-model="active.name" placeholder="请输入"></el-input>
                <!-- <el-select model-value="1">
                  <el-option value="1" label="部门1"></el-option>
                </el-select> -->
                <el-button type="primary" @click="save({})" plain="">保存</el-button>
              </el-space>
            </div>
            <div class="title flex-row-between flex-row-center">
              <span>员工列表</span>
              <el-space>
                <el-button type="primary" @click="setDesign({})" round="">
                  <el-space :size="2">
                    <Icon icon="plus" class="click"></Icon>
                    员工添加
                  </el-space>
                </el-button>
              </el-space>
            </div>
            <el-table :data="tableData" border="" stripe="">
              <el-table-column type="index" label="#" width="50px" :resizable="false" align="center"></el-table-column>
              <el-table-column prop="name" label="员工姓名" align="center"></el-table-column>
              <el-table-column prop="" label="设立主管" align="center"></el-table-column>
              <el-table-column prop="" label="管理权限" align="center"></el-table-column>
              <el-table-column prop="" label="功能权限" width="300px" align="center" :resizable="false">
                <template #default="scoped">
                  <el-space :size="10">
                    <span>
                      功能总数
                      <span class="info">30个</span>
                    </span>
                    <span>
                      可读数
                      <span class="info">12个</span>
                    </span>
                    <span>
                      可编辑数
                      <span class="info">18个</span>
                    </span>
                  </el-space>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作" width="120px" align="center" :resizable="false">
                <template #default="scoped">
                  <el-button type="primary" plain size="small" @click="setDesign(scoped.row)">编辑</el-button>
                  <el-button type="danger" plain size="small" @click="remove(scoped.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <MemberAdd v-if="design" :design="design" @close="setDesign()"></MemberAdd>
  </div>
</template>

<script>
import BaseComponent from "@/application/BaseComponent.vue";
import MemberAdd from "../memberAdd/MemberAdd.vue";
export default {
  extends: BaseComponent,
  name: "TeamManage",
  components: { MemberAdd },
  data() {
    return {
      expand: true,
      design: null,
      active: null,
      props: {
        value: "value",
        label: "name",
        children: "children"
      }
    };
  },
  computed: {
    tableData() {
      return [{ name: "用户1" }, { name: "用户2" }, { name: "用户3" }];
    },
    graphData() {
      return [
        {
          id: 1,
          name: "公司"
        },
        {
          id: 2,
          pid: 1,
          name: "部门1"
        },
        {
          id: 3,
          pid: 1,
          name: "部门2"
        },
        {
          id: 4,
          pid: 1,
          type: 2,
          name: "部门3"
        },
        {
          id: 5,
          pid: 3,
          type: 2,
          level: 3,
          name: "部门2-1"
        }
      ];
    },
    data() {
      return [
        {
          name: "数字员工",
          value: "数字员工",
          children: [{ name: "数字状态", value: "数字状态" }]
        },
        {
          name: "项目管控",
          value: "项目管控",
          children: [{ name: "项目信息", value: "项目信息" }]
        }
      ];
    }
  },
  created() {},
  setup() {},
  methods: {
    save() {},
    setActive(active) {
      this.active = active;
    },
    setDesign(design) {
      this.design = design;
    },
    getData() {
      this.$g.ajax.$api("team.getList", this.query).then((result) => {
        console.log(result);
        this.result = result;
      });
    },
    remove(item) {
      this.$g.ajax.$api("team.remove", item).then((result) => {
        console.log(result);
      });
    }
  }
};
</script>
<style>
.team-manage {
  position: relative;
  overflow: visible;
  flex-grow: 1;
}
.title {
  padding: 10px;
  min-height: 56px;
  border-bottom: 1px solid #2f517e1f;
}
.view {
  padding: 10px;
}
.graph-view {
  overflow: auto;
  flex-grow: 1;
}
.function-custom {
  overflow: auto;
  flex-grow: 1;
  border: 1px solid #2f517e1f;
  border-top: none;
  border-bottom: none;
}
.node-card {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  --r: 8px;
  right: var(--r);
  overflow: visible;
}
.node-card-header {
  height: 34px;
  background-color: var(--el-color-primary);
  color: white;
  padding: 5px 10px;
  border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
  box-sizing: border-box;
}
.node-card-body {
  flex-grow: 1;
  padding: 5px 10px;
  border-radius: 0 0 var(--el-border-radius-base) var(--el-border-radius-base);
  background-color: white;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
}
.node-card-expand {
  font-size: 0.5rem;
  position: absolute;
  top: 50%;
  right: calc(var(--r) * -2 - 1px);
  margin-top: calc(var(--r) * -1);
  border-radius: 14px;
  height: calc(var(--r) * 2);
  width: calc(var(--r) * 2);
  /* background-color: aqua; */
  z-index: -1;
  border-radius: 100%;
  border: 1px solid #2a6dac;
  background-color: white;
  font-size: 12px;
  transform: scale(0.9);

  display: flex;
  justify-content: center;
  align-items: center;
}
.struct-item-preview {
  width: 50%;
}
</style>
